import { InfoCircleOutlined } from '@ant-design/icons';
import { Area } from '@ant-design/plots';
import { Card, Col, Row, Table, Tooltip } from 'antd';
import numeral from 'numeral';
import React from 'react';
import type { DataItem } from '../data.d';
import useStyles from '../style.style';
import NumberInfo from './NumberInfo';
import Trend from './Trend';

const TopSearch = ({
  loading,
  searchData,
}: {
  loading: boolean;

  searchData: DataItem[];
}) => {

  console.log(searchData,'---searchData')
  const { styles } = useStyles();
  const columns = [
    {
      title: '日期',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '访客',
      dataIndex: 'visitPerson',
      key: 'visitPerson',
    },
    {
      title: '页面停留时常',
      dataIndex: 'stopTime',
      key: 'stopTime',
      render: (text) => (
        <span>
          { text + 's'}
        </span>
      ),
    },
    {
      title: '所有访客平均停留时常',
      dataIndex: 'avgStopTime',
      key: 'avgStopTime',
      render: (text) => (
        
        <span>
          {text === 'Infinity'? '0' :  text  + 's'}
        </span>
      ),
    },
  ];
  return (
    <Card
      loading={loading}
      bordered={false}
      title="访客记录"
      style={{
        height: '100%',
      }}
    >
      <Table<any>
        rowKey={(record) => record.index}
        size="small"
        columns={columns}
        dataSource={searchData}
        pagination={{
          style: {
            marginBottom: 0,
          },
          pageSize: 5,
        }}
      />
    </Card>
  );
};
export default TopSearch;
